<template>
  <div class="login-box">
   <div class="App">
     <h1>修改信息</h1>
   </div>
    <el-form ref="form" :model="user">

      <!--    隐藏域  -->
      <el-input type="hidden" v-model="user.id"/>

      <el-form-item label="姓名" label-width="80px">
        <el-col :span="11">
          <el-input v-model="user.name"></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="密码" label-width="80px">
        <el-col :span="11">
          <el-input v-model="user.password" show-password></el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="性别" label-width="80px">
        <el-radio-group v-model="user.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="出生日期" label-width="80px">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="user.birthday" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item label="注册日期" label-width="80px">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="user.registTime"
                          style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import Qs from 'qs'

export default {
  data() {
    return {
      id: this.$route.params.id,  // 用户ID接收传递过来的参数
      user: {
        birthday: "",
        id: 0,
        name: "",
        password: "",
        registTime: "",
        sex: "男"
      } // 声明用户对象，要在当前页面显示的
    }
  },
  methods: {
    onSubmit() {
      // 发送请求到后端执行编辑
      let vm = this;
      this.axios({
        url: 'http://localhost:9090/vue/user',
        method: 'POST',
        data: vm.user,
        transformRequest: [function (data) {
          return Qs.stringify(data)
        }]
      }).then(function (res) {
        console.log(res.data);
        if (res.data.code == 0) {
          vm.$message.success('修改成功');
          // 跳转到用户列表
          vm.$router.push("/home");
        }
      });
    }
  },
  mounted() {
    let vm = this;
    // 页面挂载时根据ID查询一下用户给user赋值
    this.axios({
      url: 'http://localhost:9090/vue/getUser/' + vm.id,
      method: 'GET'
    }).then(function (res) {
      // 查询到的结果给user对象赋值
      vm.user = res.data.data;
    });
  }
}
</script>

<style scoped>
.login-box {
  width: 500px;
  height: 500px;
  border: 1px solid #DCDFE6;
  margin: 150px auto;
  padding: 20px 50px 20px 30px;
  border-radius: 20px;
  box-shadow: 1px 1px 20px #00fa9a;
}
.App {
  color: black;
  text-align: center;
  box-shadow: 1px 1px 20px #ffebcd;
 }

</style>
